<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!--引入Vue-->
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>9.收集表单中的数据</title>
</head>

<body>
  <div id="root">
    <form @submit.prevent="demo">
      账号:<input type="text" v-model="userInfo.account"><br><br>
      密码:<input type="password" v-model="userInfo.password"><br><br>
      性别：
      男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
      女<input type="radio" name="sex" v-model="userInfo.sex" value="female"><br><br>
      爱好：
      学习<input type="checkbox" v-model="userInfo.hobby" value="study">
      打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
      吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat"><br><br>
      校区：
      <select v-model="userInfo.city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
      </select>
      <br><br>
      其他信息：
      <br>
      <textarea name="" id="" cols="30" rows="10" v-model.lazy="userInfo.other"></textarea>
      <br>
      <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
      <br>
      <button>提交</button>
      <h1>下面是添加的</h1>
      年龄<input type="number" v-model.number="userInfo.age"><br><br>

    </form>
  </div>
  <script type="text/javascript">

    new Vue({
      el: '#root',
      data: {
        userInfo: {
          account: '',
          password: '',
          sex: 'male',
          hobby: [],
          city: 'beijing',
          other: '',
          agree: ''
        }
      },
      methods: {
        demo() {
          //alert(JSON.stringify(this._data))
          alert(JSON.stringify(this.userInfo))
        }
      }
    })
  </script>
</body>

</html>